{% extends "layouts/list_qn_template.html" %}

{% block list_card %}
    <div class="card">
        <div class="card-header pb-0">
            <div class="row">
                <div class="col-lg-6 col-7">
                    <h6>实验名称：{{ instance.name }}</h6>
                    <h6>步骤一</h6>
                    <p class="text-sm mb-0">
                        请选择对应的问卷回答
                    </p>
                </div>
            </div>
        </div>
        <div class="card-body px-0 pb-2">
            <div class="table-responsive">
                <table class="table align-items-center mb-0">
                    <thead>
                    <tr>
                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                            问卷编号
                        </th>
                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                            名称
                        </th>
                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                            填写情况
                        </th>
                        <!--th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                            操作
                        </th-->
                    </tr>
                    </thead>
                    <tbody>
                    {% for l in leaves1 %}
                        <tr>
                            <td>
                                <div class="d-flex px-3 py-1">
                                    <div class="d-flex flex-column justify-content-center">
                                        <h6 class="mb-0 text-sm">{{ l.id }}</h6>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex px-2 py-1">
                                    <div class="d-flex flex-column justify-content-center">
                                        <h6 class="mb-0 text-sm">{{ l.name }}</h6>
                                    </div>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                {% if l.answered %}
                                    <span class="badge bg-gradient-success text-xxs">已填写</span>
                                {% else %}
                                    <a href="{% url 'answer' instance.id l.id %}">
                                        <span class="badge bg-gradient-danger text-xxs">未填写</span>
                                    </a>
                                {% endif %}
                            </td>
                            <!--td class="align-middle text-center">
                            <h6 class="mb-0 text-sm">
                                <a href="{#% url 'answer' instance.id l.id %#}">
                                    <u>回答</u>
                                </a></h6>
                        </td-->
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <br>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header pb-0">
            <div class="row">
                <div class="col-lg-6 col-7">
                    <h6>实验名称：{{ instance.name }}</h6>
                    <h6>步骤二</h6>
                    <p class="text-sm mb-0">
                        请选择对应的问卷回答
                    </p>
                </div>
            </div>
        </div>
        <div class="card-body px-0 pb-2">
            <div class="table-responsive">
                <table class="table align-items-center mb-0">
                    <thead>
                    <tr>
                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                            问卷编号
                        </th>
                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                            名称
                        </th>
                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                            填写情况
                        </th>
                        <!--th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                            操作
                        </th-->
                    </tr>
                    </thead>
                    <tbody>
                    {% for l in leaves2 %}
                        <tr>
                            <td>
                                <div class="d-flex px-3 py-1">
                                    <div class="d-flex flex-column justify-content-center">
                                        <h6 class="mb-0 text-sm">{{ l.id }}</h6>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex px-2 py-1">
                                    <div class="d-flex flex-column justify-content-center">
                                        <h6 class="mb-0 text-sm">{{ l.name }}</h6>
                                    </div>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                {% if l.answered %}
                                    <span class="badge bg-gradient-success text-xxs">已填写</span>
                                {% else %}
                                    <a href="{% url 'answer' instance.id l.id %}">
                                        <span class="badge bg-gradient-danger text-xxs">未填写</span>
                                    </a>
                                {% endif %}
                            </td>
                            <!--td class="align-middle text-center">
                            <h6 class="mb-0 text-sm">
                                <a href="{#% url 'answer' instance.id l.id %#}">
                                    <u>回答</u>
                                </a></h6>
                        </td-->
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <br>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header pb-0">
            <div class="row">
                <div class="col-lg-6 col-7">
                    <h6>实验名称：{{ instance.name }}</h6>
                    <h6>步骤三</h6>
                    <p class="text-sm mb-0">
                        请选择对应的问卷回答
                    </p>
                </div>
            </div>
        </div>
        <div class="card-body px-0 pb-2">
            <div class="table-responsive">
                <table class="table align-items-center mb-0">
                    <thead>
                    <tr>
                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                            问卷编号
                        </th>
                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                            名称
                        </th>
                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                            填写情况
                        </th>
                        <!--th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                            操作
                        </th-->
                    </tr>
                    </thead>
                    <tbody>
                    {% for l in leaves3 %}
                        <tr>
                            <td>
                                <div class="d-flex px-3 py-1">
                                    <div class="d-flex flex-column justify-content-center">
                                        <h6 class="mb-0 text-sm">{{ l.id }}</h6>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex px-2 py-1">
                                    <div class="d-flex flex-column justify-content-center">
                                        <h6 class="mb-0 text-sm">{{ l.name }}</h6>
                                    </div>
                                </div>
                            </td>
                            <td class="align-middle text-center">
                                {% if l.answered %}
                                    <span class="badge bg-gradient-success text-xxs">已填写</span>
                                {% else %}
                                    <a href="{% url 'answer' instance.id l.id %}">
                                        <span class="badge bg-gradient-danger text-xxs">未填写</span>
                                    </a>
                                {% endif %}
                            </td>
                            <!--td class="align-middle text-center">
                            <h6 class="mb-0 text-sm">
                                <a href="{#% url 'answer' instance.id l.id %#}">
                                    <u>回答</u>
                                </a></h6>
                        </td-->
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <br>
        </div>
    </div>
{% endblock list_card%}